<template>
    <div id="wrap">
        <h1>改造组合式API</h1>
        <p>{{ str }}</p>
        <p>{{ num }}</p>
        <img :src="imgSrc" alt=""><br>
        <img :src="src" alt=""><br>
        <button @click="add">增加</button>
        <p>{{ data }}</p>
        <p>{{ test }}</p>
        <input type="text" v-model="test" /><br />
        <button @click="etid">改变</button>
    </div>
</template>
<script lang="ts">
export default {
    name:'dayStudents'
} 
</script>
<script setup lang="ts">
import { ref } from "vue";
import imgSrc from "@/assets/images/7.png"
const str = ref<string>('你好世界')
const num: number = 123
const data = ref<number>(123)
const test: string = '小明'
const src = ref<string>('/src/assets/images/7.png')
const add = () => {
  data.value++
}
const etid = (): void => {
  str.value = '我是普通变量，不支持UI刷新'
}
</script>
<style lang="scss">
#wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    h1 {
        color: white;
    }
    img{
        width: 300px;
        height: 200px;
    }
}
</style>